<template>
  <div>
    <header>
      <a href="#" class="a1" @click="returns()"><img src="../../assets/back.png"></a><!--返回上一个网页-->
      <div>我的购物车</div>
      <span class="span1" v-show="lists.length" @click="judge=!judge;" v-html="judge?'编辑':'完成'"></span>
    </header>
    <div class="shop">
      <div class="empty" v-show="!lists.length">
        <img src="https://m.fieldschina.com//static/img/4.png">
        <p class="empty_p1">您的购物车还是空的呢</p>
        <div class="empty_a1">
          <a href="#">去逛一逛!</a>
        </div>
      </div>
      <div class="cart" v-show="lists.length">
        <img src="../../assets/Addpricebuy.jpg" class="cart_img" v-if="count!=0">
        <div class="cart_top">
          <span v-show="freeShipping<200">还差¥<span>{{freeShipping}}</span>即可免运费</span>
          <span v-show="freeShipping>=200">您已经可免运费, 商品总价为¥{{freeShipping}}</span>
          <a href="#">去凑单 》</a><!--跳转到凑单页面-->
        </div>
        <div class="cart_promotion">非促销商品</div>
        <ul class="cart_ul">
          <li class="cart_li" v-for="(v,k) in newChecked">
            <label class="cart_box" v-model="selectList" :id="lists[k].id" :value="k" name="selectList">
              <input type="checkbox" class="cart_box2" :checked="v" @click="clickone(k)">
            </label>
            <a href="#" class="cart_a1"><img :src="lists[k].goodsimg"></a>
            <div class="cart_info">
              <a href="#">{{lists[k].goodsname}}</a>
              <p class="cart_p1">{{lists[k].discount}}&nbsp</p>
              <p class="cart_p2">&nbsp</p>
              <div class="cart_price">¥{{lists[k].goodsprice}}</div>
              <div class="cart_num" v-show="judge">
                <button type="button" @click="plus(k)" :disabled="lists[k].goodsnum === 1">－</button>
                <input type="text" :value=lists[k].goodsnum>
                <button type="button" @click="minus(k)">＋</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="fond" v-show="!lists.length">
      <div class="fond_p">猜你喜欢</div>
      <div class="fondul">
        <ul class="fond_ul">
          <li class="fond_li">
            <a href="#" class="fond_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="fond_name">Dole 都乐菲律宾香蕉</a>
            <p class="fond_spec">规格: 4-7 (1千克)</p>
            <p class="fond_price">¥17</p>
          </li>
          <li class="fond_li">
            <a href="#" class="fond_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="fond_name">Dole 都乐菲律宾香蕉</a>
            <p class="fond_spec">规格: 4-7 (1千克)</p>
            <p class="fond_price">¥17</p>
          </li>
          <li class="fond_li">
            <a href="#" class="fond_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="fond_name">Dole 都乐菲律宾香蕉</a>
            <p class="fond_spec">规格: 4-7 (1千克)</p>
            <p class="fond_price">¥17</p>
          </li>
          <li class="fond_li">
            <a href="#" class="fond_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="fond_name">Dole 都乐菲律宾香蕉</a>
            <p class="fond_spec">规格: 4-7 (1千克)</p>
            <p class="fond_price">¥17</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="gift" v-show="lists.length">
      <div class="gift_p">超值换购（满238元限购一份）</div>
      <div class="giftul">
        <ul class="gift_ul">
          <li class="gift_li">
            <a href="#" class="gift_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="gift_name">酷彩 珐琅铸铁方形牛排烤锅 S级新款 26cm</a>
            <p class="gift_spec">26厘米</p>
            <p>
              <span class="gift_current">¥769</span>
              <span class="gift_original">¥1.688</span>
            </p>
            <img src="../../assets/cart.png" class="gift_cart">
          </li>
          <li class="gift_li">
            <a href="#" class="gift_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="gift_name">酷彩 珐琅铸铁方形牛排烤锅 S级新款 26cm</a>
            <p class="gift_spec">26厘米</p>
            <p>
              <span class="gift_current">¥769</span>
              <span class="gift_original">¥1.688</span>
            </p>
            <img src="../../assets/cart.png" class="gift_cart">
          </li>
          <li class="gift_li">
            <a href="#" class="gift_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="gift_name">酷彩 珐琅铸铁方形牛排烤锅 S级新款 26cm</a>
            <p class="gift_spec">26厘米</p>
            <p>
              <span class="gift_current">¥769</span>
              <span class="gift_original">¥1.688</span>
            </p>
            <img src="../../assets/cart.png" class="gift_cart">
          </li>
          <li class="gift_li">
            <a href="#" class="gift_pic"><img src="../../assets/sg_1.jpg"></a>
            <a href="#" class="gift_name">酷彩 珐琅铸铁方形牛排烤锅 S级新款 26cm</a>
            <p class="gift_spec">26厘米</p>
            <p>
              <span class="gift_current">¥769</span>
              <span class="gift_original">¥1.688</span>
            </p>
            <img src="../../assets/cart.png" class="gift_cart">
          </li>
        </ul>
      </div>
    </div>

    <div class="pay" v-show="judge&&lists.length">
      <div class="pay_top">
        <div class="pay_coupon">
          <img src="../../assets/coupon.png">
          <span>我的优惠卷</span>
          <span class="pay_span">7</span>
        </div>
        <div class="pay_freebie">
          <img src="../../assets/gifts.png">
          <span>赠品</span>
        </div>
      </div>
      <div class="pay_bottom">
        <div class="pay_all" >
          <label class="pay_img" >
            <input type="checkbox" class="pay_img2" v-model="checked" :checked="checked" @click="payaAll">
            全选
          </label>
        </div>
        <div class="pay_total">
          <p class="pay_p1">合计: ¥<span>{{totalMoney}}</span></p>
          <p class="pay_p2">已优惠:&nbsp&nbsp&nbsp¥<span>0</span>,&nbsp&nbsp运费:&nbsp&nbsp&nbsp¥<span>{{cargoFreight}}</span></p>
        </div>
        <a href="#" class="pay_clearing">结算 (<span>{{amount}}</span>)</a><!--跳转到结算页面-->
      </div>
    </div>

    <div class="delete" v-show="!judge&&lists.length">
      <div class="delete_all" >
        <label class="delete_img">
          <input type="checkbox" class="delete_img2" v-model="checked" :checked="checked" @click="deleteAll()">
          全选
        </label>
      </div>
      <div class="delete_clearing">删除商品</div>
    </div>

    <div class="mask" v-show="!lists.length"></div>
  </div>
</template>

<script>
  import Vue from "vue"
  export default {
    name: "Shopping",
    data () {
      return {
        judge:true,
        count: 3,
        checked:true,
        // lists:[{id:"1"},{id:"2"}],
        lists:[],
        selectList: [],
        newChecked:[],
        delete:[],
      }
    },
    //渲染页面
    created:function () {
      var params = new URLSearchParams();
      params.append('username',"17551755074");
      this.$http.post('http://10.80.7.192/putian/shoppingcar/mess.php',params).then((res)=>{
        console.log(res.data);
        this.lists = res.data;
        for(var i = 0; i < this.lists.length; i++) {
          this.lists[i].checked = true;
          this.newChecked.push(this.lists[i].checked);
        }
        console.log(this.newChecked);
      }).catch((err)=>{
        console.log(err);
      })
      var params = new URLSearchParams();
      params.append('id',this.delete);
      this.$http.post('http://10.80.7.192/putian/shoppingcar/dropone.php',params).then((res)=>{
        console.log(res);
        this.lists=res.data;
      }).catch((err)=>{
        console.log(err);
      })
    },
    mounted(){
      setTimeout(()=> {
        this.count = 0;
      }, 3000)
    },
    methods:{
      //返回上一个页面
      returns(){
        this.$router.go(-1)
      },
      //复选框
      payaAll(){
        var selectList = document.getElementsByName('selectList');
        if(this.checked) {
          for(var i = 0; i < this.newChecked.length; i++) {
            this.newChecked.splice(i,1,false);
          }
          this.checked = false;
          this.selectList = [];
        } else {
          for(var i = 0; i < this.lists.length; i++) {
            this.newChecked.splice(i,1,true);
          }
          // this.checked = true;
        }
      },
      deleteAll(){
        var selectList = document.getElementsByName('selectList');
        if(this.checked) {
          for(var i = 0; i < this.newChecked.length; i++) {
            this.newChecked.splice(i,1,false);
          }
          this.checked = false;
          this.selectList = [];
        } else {
          for(var i = 0; i < this.newChecked.length; i++) {
            this.newChecked.splice(i,1,true);
          }
          // this.checked = true;
        }
      },
      clickone(k){
        this.newChecked.splice(k,1,!this.newChecked[k]);
        this.allchecked();
      },
      allchecked(){
        var length=0;
        for(var i = 0; i < this.newChecked.length; i++) {
          if(this.newChecked[i] == true){
            length++;
          }
        }
        // console.log(length);
        if(length==this.newChecked.length){
          this.checked = true;
        }else{
          this.checked = false;
        }
        // console.log(this.checked);
      },
      //数量加减
      //减
      plus(k){
        if (this.lists[k].goodsnum < 2){
          return;
        }
        this.lists[k].goodsnum--;
      },
      //加
      minus(k){
        this.lists[k].goodsnum++;
      }
    },
    computed:{
      //免运费
      freeShipping: function() {
        var total = 0;
        for(var i = 0; i < this.newChecked.length; i++) {
          if(this.newChecked[i]) {
            total += this.lists[i].goodsnum *this.lists[i].goodsprice;
          }
        }
        if (total<200){
          total = 200 - total
        } else {
          total=total
        }
        //把total转换为字符串并且每3个数字添加一个','
        return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
      },
      //合计
      totalMoney:function () {
        var total = 0;
        for(var i = 0; i < this.newChecked.length; i++) {
          if(this.newChecked[i]) {
            total += this.lists[i].goodsnum *this.lists[i].goodsprice;
          }
        }
        if (total<200){
          total += 50
        } else if(total<100){
          total += 20
        } else {
          total=total
        }
        return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
      },
      //运费
      cargoFreight:function(){
        var total = 0;
        var totals = 0;
        for(var i = 0; i < this.newChecked.length; i++) {
          if(this.newChecked[i]) {
            total += this.lists[i].goodsnum *this.lists[i].goodsprice;
          }
        }
        if (total<100){
          totals = 50
        } else if(total<200){
          totals = 20
        } else {
          totals = 0
        }
        return totals
      },
      amount:function(){
        var total = 0;
        for(var i = 0; i < this.newChecked.length; i++) {
          if(this.newChecked[i]) {
            total += this.lists[i].goodsnum*1;
          }
        }
        return total
      }
    }
  }
</script>

<style scoped>
  a{
    color: #333;
    text-decoration: none;
  }
  header{
    width: 100%;
    line-height:92px;
    font-size: 36px;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
  }
  .span1{
    padding-right: 10px;
  }
  .a1{
    position: absolute;
    left: 0;
    top: 14px;
  }
  .shop{
    border-bottom:16px solid #f0f0f0;
    margin-top: 92px;
  }
  .empty{
    text-align: center;
  }
  .empty img{
    width:280px;
    height:280px;
    margin-top:50px;
    margin-bottom:50px;
  }
  .empty_p1{
    font-size: 28px;
    line-height: 28px;
    font-weight: 400;
    color: #a4a4a4;
  }
  .empty_a1{
    margin: auto;
    margin: 20px 40px 18px 40px;
    line-height: 80px;
    border:2px solid  #009c4c;
    border-radius: 4px;
  }
  .empty_a1 a{
    font-size: 28px;
    width: 100%;
    height: 100%;
    display:block;
  }
  .fond_p{
    font-size: 28px;
    color: #717171;
    text-align: center;
    line-height: 80px;
    border:1px solid  #f0f0f0;
  }
  .fondul{
    overflow:hidden;
    height: 430px;
  }
  .fond_ul{
    height: 444px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .fond_ul li{
    float: left;
    width:244px;
    text-align: center;
    padding: 10px 26px 20px 26px;
  }
  .fond_pic img{
    width:244px;
    height:244px;
  }
  .fond_name{
    line-height: 38px;
    box-sizing: border-box;
    padding-top: 14px;
    font-size: 28px;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .fond_spec{
    font-size: 24px;
    line-height: 1.4;
    color: #717171;
  }
  .fond_price{
    font-size: 28px;
    color: #009c4c;
  }


  .cart_img{
    width: 100%;
  }
  .span1{
    position: absolute;
    top: 0px;
    right: 10px;
    color: #333;
    font-size: 24px;
  }
  .cart_top{
    background-color: #009c4c;
    color: #fff;
    font-size: 28px;
    padding-left: 40px;
    line-height: 70px;
    position: relative;
  }
  .cart_top a{
    color: #fff;
    font-size: 28px;
    line-height: 70px;
    position: absolute;
    right: 10px;
  }
  .cart_promotion{
    font-size: 28px;
    line-height: 66px;
    border-bottom: 2px solid #f0f0f0;
    padding-left: 40px;
    color: #333;
  }
  .cart_li{
    padding: 30px 40px;
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .cart_box2{
    display:inline-block;
    position:absolute;
    left: 24px;
    top: 50%;
    margin-top: -20px;
    width: 32px;
    height: 32px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    outline: none;
  }
  .cart_box input[type=checkbox]:checked{
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background: url("../../assets/success.png")no-repeat center;
  }
  .cart_a1{
    display:inline-block;
    float: left;
    margin-left: 40px;
    margin-right: 30px;
  }
  .cart_a1 img{
    width: 150px;
    height: 150px;
    vertical-align: middle;
  }
  .cart_info{
    height: 154px;
    float: left;
  }
  .cart_info a{
    display:block;
    line-height: 32px;
    height: 64px;
    font-size: 28px;
    color: #333;
  }
  .cart_p1{
    line-height: 28px;
    color: #ee555a;
  }
  .cart_p2{
    line-height: 28px;
    font-size: 12px;
    color: #009c4c;
  }
  .cart_price{
    font-size: 28px;
    color: #009c4c;
    line-height: 42px;
    display: inline-block;
  }
  .cart_num{
    width: 164px;
    height: 54px;
    position: absolute;
    bottom: 30px;
    right: 40px;
  }
  .cart_num input{
    width: 56px;
    height: 50px;
    padding: 2px;
    border: 2px solid #f0f0f0;
    text-align: center;
    outline:none;
    margin-left: -8px;
  }
  .cart_num button{
    width: 50px;
    height: 50px;
    /*border: 2px solid #fff;*/
  }
  .cart_num button:nth-of-type(2){
    margin-left: -8px;
  }
  .gift_p{
    font-size: 28px;
    color: #333;
    padding: 18px 20px;
    line-height: 32px;
    border-bottom: 2px solid #f0f0f0;
  }
  .giftul{
    overflow:hidden;
    height: 430px;
  }
  .gift_ul{
    height: 444px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .gift_ul li{
    float: left;
    width:244px;
    text-align: center;
    padding: 10px 26px 20px 26px;
    position: relative;
  }
  .gift_pic img{
    width:244px;
    height:244px;
  }
  .gift_name{
    line-height: 40px;
    font-size: 28px;
    color: #333;
    padding-top: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .gift_spec{
    font-size: 12px;
    line-height: 1.4;
    color: #717171;
  }
  .gift_current{
    font-size: 28px;
    color: #009c4c;
  }
  .gift_original{
    font-size: 12px;
    color: #a4a4a4;
    text-decoration: line-through;
  }
  .gift_cart{
    position: absolute;
    right: 20px;
    bottom:32px;
  }
  .pay{
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1110;
  }
  .pay_top{
    overflow: hidden;
    line-height: 70px;
  }
  .pay_coupon{
    width: 50%;
    float: left;
    background-color: #f0f0f0;
    box-sizing: border-box;
    border-right: 1px solid #fff;
    text-align: center;
  }
  .pay_freebie{
    width: 50%;
    float: left;
    background-color: #f0f0f0;
    box-sizing: border-box;
    border-left: 1px solid #fff;
    text-align: center;
  }
  .pay_freebie img,.pay_coupon img{
    vertical-align: middle;
  }
  .pay_coupon img{
    transform: rotate(45deg);
  }
  .pay_freebie span,.pay_coupon span{
    color: #333;
    position: relative;
    top: 2px;
  }
  .pay_freebie span{
    left: -5px;
  }
  .pay_coupon .pay_span{
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    border: 2px solid #009c4c;
    color: #009c4c;
    display:inline-block;
    transform: scale(0.7,0.7);
    top: -12px;
    left: -5px;
  }
  .pay_bottom{
    overflow: hidden;
    height: 100px;
  }
  .pay_all{
    float: left;
    text-align: center;
    width: 80px;
    color: #717171;
  }
  .pay_img2{
    display:block;
    width: 32px;
    height: 32px;
    background-color: #fff;

    -webkit-appearance:none;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    outline: none;

    margin: auto;
    margin-top: 16px;
    margin-bottom:5px;
  }
  .pay_img input[type=checkbox]:checked{
    width: 32px;
    height: 32px;
    background: url("../../assets/success.png")no-repeat center;
  }
  .pay_total{
    float: left;
    margin-left: 20px;
  }
  .pay_p1{
    margin-top: 16px;
    line-height: 32px;
    font-size: 28px;
    color: #333;
  }
  .pay_p2{
    line-height: 50px;
    color: #717171;
  }
  .pay_clearing{
    float: right;
    width: 240px;
    line-height: 100px;
    height: 100px;
    text-align: center;
    background-color: #009c4c;
    color: #fff;
    font-size: 32px;
  }
  .delete{
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1110;
    line-height: 98px;
    border-top: 2px solid #f0f0f0;
    overflow: hidden;
  }
  .delete_all{
    float: left;
  }
  .delete_all label{
    font-size: 32px;
    color: #333;
  }
  .delete_img2{
    display:inline-block;
    margin-left: 24px;
    margin-right: 6px;
    position: relative;
    top: 3px;
    width: 32px;
    height: 32px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 2px solid #c9c9c9;
    border-radius: 50%;
    outline: none;
  }
  .delete_img input[type=checkbox]:checked{
    margin-left: 24px;
    margin-right: 6px;
    position: relative;
    top: 3px;
    width: 32px;
    height: 32px;
    background: url("../../assets/success.png")no-repeat center;
  }
  .delete_clearing{
    float: right;
    width: 200px;
    background-color: #009c4c;
    color: #fff;
    text-align: center;
    font-size: 32px;
    height: 100px;
  }
  .mask{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 95px;
    background-color: #fff;
    z-index: 1000;
  }
</style>

